<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="icon" href="data:;base64,=">
    <link rel="stylesheet" href="/js/elementui/index.css">
    <style>
        #printOrderLi li{
            width: 243px;
            float: left;
            text-align: left;
            padding-bottom: 30px;
        }
        .el-pagination {
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
    <el-button type="primary" @click="printOrder('0')" >打印订单</el-button>
    <el-button type="primary" @click="printOrder('1')">打印发货单</el-button>
    <!--    数据表格-->
    <el-table
            ref="shippingTable"
            :data="shippingTable"
            @current-change="changeCurrent"
            @select-all="selectAll"
            style="width: 100%">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                label="序号"
        >
            <template slot-scope="scope">
                <span >{{scope.row.id}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="订单编号"
        >
            <template slot-scope="scope">
                <span >{{ scope.row.orderId}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="订单状态"
        >
            <template slot-scope="scope">
                <span style="color: red">{{ scope.row.allStatus}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="会员名"
        >
            <template slot-scope="scope">
                <span >{{scope.row.orderHolder}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="付款情况"
        >
            <template slot-scope="scope">
                <span >已付款</span>
            </template>

        </el-table-column>
        <el-table-column
                label="商品名称"
        >
            <template slot-scope="scope">
                <span >{{scope.row.productName}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="商品数量"
        >
            <template slot-scope="scope">
                <span >{{scope.row.number}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="应收金额"
        >
            <template slot-scope="scope">
                <span >￥{{scope.row.sumPrice}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="实收金额"
        >
            <template slot-scope="scope">
                <span >￥{{scope.row.money}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="赠送积分"
        >
            <template slot-scope="scope">
                <span >{{scope.row.intergral}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="收货人"
        >
            <template slot-scope="scope">
                <span >{{scope.row.receiverName}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="收货地址"
        >
            <template slot-scope="scope">
                <span >{{scope.row.address}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="下单时间"
        >
            <template slot-scope="scope">
                <span >{{scope.row.dealTime}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="支付时间"
        >
            <template slot-scope="scope">
                <span >{{scope.row.dealTime}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="订单备注"
        >
            <template slot-scope="scope">
                <span >{{scope.row.remark}}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button type="primary"
                        size="mini"
                           @click="showOrderShippingDialog(scope.$index,scope.row)">发货</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
            small
            layout="prev, pager, next"
            @current-change="loadPage"
            :total="total"
            :current-page="current"
            :page-size="pageSize">
    </el-pagination>
    <!--发货-->
    <el-dialog title="发货确认" :visible.sync="showOrderShippingVisible" >
        <el-form :model="orderShipp" ref="orderShipp">
            <el-form-item label="订单编号" prop="orderId" >
                <el-input
                        :disabled="true" :value=orderShipp.orderId>
                </el-input>
            </el-form-item>
           <el-form-item label="配送方式" prop="logisticsName">
                <el-select v-model="orderShipp.shippingType.logisticsName"   placeholder="请选择配送方式">
                    <el-option v-for="item in orderShipp.shippingType"   :value="item.logisticsName"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="发货车辆" prop="vehicleName">
               <el-select v-model="orderShipp.shippingCarAndDriver.vehicleName"  placeholder="请选择发货车辆"
                          @change="selectShippingCar(orderShipp.shippingCarAndDriver,orderShipp.shippingCarAndDriver.vehicleName)"
               >
                   <el-option v-for="(item,i) in orderShipp.shippingCarAndDriver"
                              :key="item.numberPlate"
                              :value="item.numberPlate"
                              :label="item.vehicleName"
                   ></el-option>
               </el-select>
           </el-form-item>
            <el-form-item label="发货时间" prop="shippingDate">
                <div class="block">
                    <span class="demonstration">默认</span>
                    <el-date-picker
                            v-model="orderShipp.shippingDate"
                            type="datetime"
                            placeholder="选择日期"
                            format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss">
                    >
                    </el-date-picker>
                </div>
            </el-form-item>

            <el-form-item label="司机姓名" prop="driverName">
                <el-input
                        :disabled="true" :value="orderShipp.driverName">
                </el-input>
            </el-form-item>
            <el-form-item label="司机电话" prop="driverControl">
                <el-input
                        :disabled="true" :value="orderShipp.driverControl">
                </el-input>
            </el-form-item>
            <el-form-item label="车牌号码" prop="numberPlate">
            <el-input
                    :disabled="true" :value="orderShipp.numberPlate">
            </el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelShowOrderShipping('orderShipp')">取 消</el-button>
            <el-button type="primary" @click="sureShipping('orderShipp')" >确 定</el-button>
        </div>
    </el-dialog>
    <!--打印订单-->
    <el-dialog  :visible.sync="printOrderVisible" width="100%">
        <p style="text-align: center;font-size: 20px" v-if="printOrderStatus==0"><b>订单详情</b></p>
        <p style="text-align: center;font-size: 20px" v-if="printOrderStatus==1"><b>ERP公司发货单</b></p>
        <el-form :model="printOrderMessageForm" ref="printOrderMessageForm">
            <ul style="list-style: none" id="printOrderLi" v-if="printOrderMessageForm.shippingMessage">
                <li>购货人：{{printOrderMessageForm.orderMessage.orderHolder}}</li>
                <li>付款日期：{{printOrderMessageForm.orderMessage.dealTime}}</li>
                <li >发货单号：{{printOrderMessageForm.shippingMessage.shippingNum}}</li>
                <li>付款时间：{{printOrderMessageForm.orderMessage.dealTime}}</li>
                <li>发货时间：{{printOrderMessageForm.shippingMessage.shippingDate}}</li>
                <li>配送方式：{{printOrderMessageForm.orderMessage.logisticsName}}</li>
                <li>支付方式：{{printOrderMessageForm.orderMessage.payType}}</li>
                <li>收货人手机：{{printOrderMessageForm.orderMessage.telephone}}</li>
                <li>物流公司电话：{{printOrderMessageForm.orderMessage.logisticsContact}}</li>
                <li>收货地址：{{printOrderMessageForm.orderMessage.address}}</li>
                <li>收货人：{{printOrderMessageForm.orderMessage.receiverName}}</li>
            </ul>

            <el-table style="width: 100%"
                ref="printOrderMessage"
                 :data="printOrderMessage"
                >
                <el-table-column label="订单编号">
                    <template slot-scope="scope">
                        <span >{{scope.row.orderId}}</span>
                    </template>
               </el-table-column>
                <el-table-column label="商品名称">
                    <template slot-scope="scope">
                        <span >{{scope.row.productName}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="货号">
                    <template slot-scope="scope">
                        <span >{{scope.row.productId}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="价格">
                    <template slot-scope="scope">
                        <span >{{scope.row.price}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="数量">
                    <template slot-scope="scope">
                        <span >{{scope.row.number}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="小计">
                    <template slot-scope="scope">
                        <span >{{scope.row.sumPrice}}</span>
                    </template>
                </el-table-column>
           </el-table>

            <p style="text-align: right">商品总金额：{{printOrderSumPrice}}</p>
            <p style="text-align: right">应付款：{{printOrderSumPrice}}</p>
            <p style="text-align: right">打印时间：{{printOrderTime}} 操作者：<span sec:authentication="name"></span></p>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelPrintOrder">取 消</el-button>
            <el-button type="primary" @click="surePrintOrder" >确 定</el-button>
        </div>
    </el-dialog>
</div>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el:"#app",
        data() {
           return {
               showOrderShippingVisible:false,
               currentLine:null,
               shippingTable:null,
               total:0,
               current:1,
               pageSize:10,
                shipping:{
                    id:'',
                    orderNum:'',
                    shippingNmu:'',
                    shippingMethodId:'',
                    shippingTruckId:'',
                    shippingDate:'',
                    driverId:'',
                    startPlace:'',
                    endPlace:'',
                    companyId:'',
                    logisticsId:'',
                    logisticsName:'',
                    orderHolder:''
                },
               orderShipp:{
                   orderId:'',
                   //配送方式
                   shippingType:{
                       logisticsId:'',
                       logisticsName:''
                   },
                   //配送方式
                   shippingCarAndDriver:'',
                   //车牌号
                   numberPlate:'',
                   //司机姓名
                   driverName:'',
                   //司机联系电话
                   driverControl:'',
                   //发货时间
                   shippingDate: ''
               },
               pickerOptions: {
                   disabledDate(time) {
                       return time.getTime() > Date.now();
                   }
               },
               //打印订单
               printOrderMessage:[],
               printOrderMessageForm:{
                   //页面加载时已请求订单的后台数据
                   orderMessage:'',
                   //发货信息
                   shippingMessage:null
               },
               //结算金额
               printOrderSumPrice:'',
               printOrderTime:'',
               printOrderStatus:'',
               printOrderVisible:false,
           }
        },methods:{
            loadPage(current){
                this.current = current;
                axios.get("/shipping-order/" + current).then(value => {
                    if (value.data.code == 1) {
                        this.shippingTable = value.data.data.records;
                        this.total = value.data.data.total;
                        this.current = value.data.data.current;
                        this.pageSize = value.data.data.pageSize;
                    }
                });
            },
            //列表点击一行
            changeCurrent(row){
                this.currentLine=row;
                //每点击一行就对以前的数据清空
                this.printOrderMessage=[]
                this.printOrderMessage.push(row)
                this.$nextTick(()=>{
                    //赋值
                    this.printOrderMessageForm.orderMessage=row
                    this.printOrderSumPrice=row.sumPrice
                })
                this.$refs.shippingTable.clearSelection();
                this.$refs.shippingTable.toggleRowSelection(row);
            },
            //选择所有的操作
            selectAll(){
                this.$refs.shippingTable.clearSelection();
            },
            //订单发货
            showOrderShippingDialog(index,row){
                this.showOrderShippingVisible=true;
                this.orderShipp.orderId=row.orderId;
                this.shipping.orderNum=row.orderId
                this.shipping.startPlace=row.beginAddress
                this.shipping.endPlace=row.address
                axios.get("/shipping-company/"+row.logisticsId).then(value => {
                    if (value.data.code == 1) {
                        this.$nextTick(()=>{
                            //赋值
                            this.orderShipp.shippingType = value.data.data;
                            this.orderShipp.shippingCarAndDriver =value.data.data[0].zcftVehicles
                        })

                    }
                });
            },
            //订单发货取消
            cancelShowOrderShipping(ship){
                this.showOrderShippingVisible=false;
                this.$message("已取消发货！");
                this.$refs[ship].resetFields();
            },
            //选择车辆,得到司机姓名和联系方式
            selectShippingCar(driver,vehicleName){
                this.$nextTick(()=>{
                    //赋值
                    this.orderShipp.numberPlate=vehicleName
                    for (let i = 0; i < driver.length; i++) {
                        if (vehicleName==driver[i].numberPlate){
                            this.orderShipp.driverName=driver[i].zcftDriverList[0].driverName
                            this.orderShipp.driverControl=driver[i].zcftDriverList[0].driverControl
                        }
                    }
                })
            },
            //订单确认发货
            sureShipping(ship){
                this.shipping.companyId = this.orderShipp.shippingType[0].companyId
                this.shipping.shippingMethodId=this.orderShipp.shippingType[0].logisticsId
                this.shipping.shippingTruckId=this.orderShipp.shippingCarAndDriver[0].vehicleId
                this.shipping.shippingDate=this.orderShipp.shippingDate
                this.shipping.driverId=this.orderShipp.shippingCarAndDriver[0].driverId
                // 发送 POST 请求
                axios.post("/shipping/",this.shipping).then(value => {
                    if (value.data.code == 1) {
                        this.showOrderShippingVisible=false;
                        this.$message("发货成功！");
                        this.$refs[ship].resetFields();
                    }
                });

            },
            //打印订单
            printOrder(status){
                this.printOrderStatus=status
                if ( this.printOrderMessage.length!=0){
                    axios.get("/shipping/"+this.printOrderMessageForm.orderMessage.orderId).then(value => {
                        if (value.data.code == 1) {
                            this.$nextTick(()=>{
                                //赋值
                                this.printOrderMessageForm.shippingMessage=value.data.data;
                            })
                            if (this.printOrderMessageForm.shippingMessage!=null){
                                this.printOrderVisible=true
                            }else {
                                this.$message("该订单还未发货!");
                            }
                        }
                    });
                }else {
                    this.$message("请选择订单!");
                }


            },
            cancelPrintOrder(){
                this.printOrderVisible=false;
                this.$message("已取消打印!");
            },
            surePrintOrder(){
                this.printOrderVisible=false;
                this.$message("已成功打印!");
            },
            currentTime() {
                setInterval(this.formatDate, 500);
            },
            formatDate() {
                let date = new Date();
                let year = date.getFullYear(); // 年
                let month = date.getMonth() + 1; // 月
                let day = date.getDate(); // 日
                let week = date.getDay(); // 星期
                let weekArr = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ];
                let hour = date.getHours(); // 时
                hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
                let minute = date.getMinutes(); // 分
                minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
                let second = date.getSeconds(); // 秒
                second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
                this.printOrderTime = `${year}-${month}-${day} ${hour}:${minute}:${second} `;

            }
        },
        mounted(){
            this.loadPage(1);
            this.currentTime();
        },
        // 销毁定时器
        beforeDestroy() {
            if (this.formatDate) {
                clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
            }
        }
    });
</script>
</body>
</html>